<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<script src="js/selectcourse/vue.min.js"></script>
	<script src="js/selectcourse/vue.js"></script>
	<script src="js/selectcourse/vue-resource.min.js"></script>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="css/selectcourse/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/selectcourse/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/selectcourse/bootstrap.min.js"></script>
	<!-- meta使用viewport以确保页面可自由缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 引入 jQuery Mobile 样式 -->
	<link rel="stylesheet" href="css/selectcourse/jquery.mobile-1.4.5.min.css">
	<!-- 引入 jQuery 库 -->
	<script src="js/selectcourse/jquery.min.js"></script>
	<!-- 引入 jQuery Mobile 库 -->
	<script src="js/selectcourse/jquery.mobile-1.4.5.min.js"></script>
	<title>查看课表</title>
	<style>
		.temp{display: inline-block;width: 22%;margin-right: 32px;}
		.main{background-color: #00d9ff0d;position:relative;margin-top: 40px;}
		.jie{width:12%;display: inline-block;text-align: center; float:left;border: 0.5px solid #b7bec3;padding-top:5px;padding-bottom:5px;}
		.stage{width:5%;display: inline-block;text-align: center;float:left;border: 0.5px solid #b7bec3;padding-top:5px;padding-bottom:5px;}
		.weekhead{width:12%;float:left;display: inline-block;text-align: center;border: 0.5px solid #b7bec3;padding-top:5px;padding-bottom:5px;}
		.title{margin-bottom:20px;text-align:center;}
		.day{height:250px;}
		.evening{height:150px;}
		.day_title{text-align:center;width:12%;font-size:20px;float: left;display: inline-block;height:250px;line-height: 125px;font-size:30px;border: 0.5px solid #b7bec3;}
		.evening_title{text-align:center;width:12%;font-size:20px;float: left;display: inline-block;height:150px;line-height: 75px;font-size:30px;border: 0.5px solid #b7bec3;}
		.even_numset{width:12%;float:left;height:150px;border: 0.5px solid #b7bec3;}
		.numset{width:12%;float:left;height:250px;border: 0.5px solid #b7bec3;}
		.jie-item{height:50px;border-bottom: 0.5px solid #b7bec3;line-height: 50px;text-align: center;font-size:20px;font-weight:bolder;}
		.item-col{height:250px;width:12%;border: 0.5px solid #b7bec3;float:left;display: inline-block;}
		.item-col-evening{height:150px;width:12%;border: 0.5px solid #b7bec3;float:left;display: inline-block;}
		.each-col{position:absolute;top:77px;height:1300px;width:12%;}

		.item-class{position: absolute;width: 12%;height: 400px;text-align: center;border-top: 0.3px solid #b7bec3;border-bottom: 0.3px solid #b7bec3;padding:3px;}
		.content-class{width: 100%;display: inline-block;text-align: left;overflow: hidden;}
		.content-row{width:100%;font-size:8px}
		.content_tip{font-weight: bolder;font-size:8px;}
	</style>
</head>
<body>
<div data-role="page" id="pageone">
	<!-- 面板 -->
  <div data-role="panel" id="myPanel">
      <a href="/index" data-ajax="false" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
      <a href="/coursetablemobile" data-ajax="false" class="ui-btn ui-icon-lock ui-btn-icon-left">查看课表</a>
      <a href="/selectcoursemobile" data-ajax="false" class="ui-btn ui-icon-info ui-btn-icon-left">自主选课</a>
      <a href="/gradeinfomobile" data-ajax="false" class="ui-btn ui-icon-info ui-btn-icon-left">成绩查询</a>
      <a href="/StuLookThroughQuesMobile" target="_self" class="ui-btn ui-icon-home ui-btn-icon-left">论题列表</a>
      <a href="/StuChoiceMobile" target="_self" class="ui-btn ui-icon-lock ui-btn-icon-left">我的论题</a>
      <a href="/StuScoreMobile"  target="_self" class="ui-btn ui-icon-lock ui-btn-icon-left">我的成绩</a>
  </div>	
  	<!-- 头部 -->
	<div data-role="header">
	<a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
	<h1>学生课表查询</h1>
	</div>
  	<!-- 主体 -->
  <div data-role="main" class="ui-content">
  	<label>学年:</label>
  	<select v-model="start">
        <option th:value="${currentSemester.start}">当前学年</option>
        <option th:value="${semester.start}"  th:each="semester : ${semesterlist}">[[${semester.start}]] - [[${semester.end}]]</option>
  	</select>
  	<label>学期:</label>
  	<select v-model="semester">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<br>
  	<div>
  		<input type="submit" value="查询" @click="getcoursetable()">
  	</div>

  	<div class="row main">
      <div id="table">
		    <div class="header">
      		<div class="jie">节次</div>
      		<div class="weekhead">周一</div>
      		<div class="weekhead">周二</div>
      		<div class="weekhead">周三</div>
      		<div class="weekhead">周四</div>
      		<div class="weekhead">周五</div>
      		<div class="weekhead">周六</div>
      		<div class="weekhead">周日</div>
		    </div>

        <div class="day">
          <div class="numset">
            <div class="jie-item">1</div>
            <div class="jie-item">2</div>
            <div class="jie-item">3</div>
            <div class="jie-item">4</div>
            <div class="jie-item">5</div>
          </div>
          <div class="item-col" id="col-1">
          </div>
          <div class="item-col" id="col-2">
          </div>
          <div class="item-col" id="col-3">
          </div>
          <div class="item-col" id="col-4">
          </div>
          <div class="item-col" id="col-5">
          </div>
          <div class="item-col" id="col-6">
          </div>
          <div class="item-col" id="col-7">
          </div>
        </div>

        <div class="day">
          <div class="numset">
            <div class="jie-item">6</div>
            <div class="jie-item">7</div>
            <div class="jie-item">8</div>
            <div class="jie-item">9</div>
            <div class="jie-item">10</div>
          </div>

          <div class="item-col"></div>
          <div class="item-col"></div>
          <div class="item-col"></div>
          <div class="item-col"></div>
          <div class="item-col"></div>
          <div class="item-col"></div>
          <div class="item-col"></div>
        </div>

        <div class="evening">
          <div class="even_numset">
            <div class="jie-item">11</div>
            <div class="jie-item">12</div>
            <div class="jie-item">13</div>
          </div>

          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
          <div class="item-col-evening"></div>
        </div>
    </div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript">
	var noe_coursetable = new Vue({
		el:"#pageone",
		data:{
			start:[[${currentSemester.start}]],
			semester:"1",
			courses:[],
		},
		methods:{
		parserHtml:function(cInfo){
                var div=document.createElement("div");
                div.setAttribute("class","item-class");
                var height=(cInfo.endStep-cInfo.startStep+1)*50;
                var top=(cInfo.startStep-1)*50+32;
                div.style.height=""+height+"px";
                div.style.top=""+top+"px";
                var content_class=document.createElement("div");
                content_class.setAttribute("class","content-class");

                var time="("+cInfo.startStep+"-"+cInfo.endStep+"节) ";
                time+=""+cInfo.startWeek+"-"+cInfo.endWeek+"周";
                content_class.innerHTML="<p style='font-size:10px'>"+cInfo.cname+"<p>" +
                    "<div class='content-row'><span class='content_tip'>时间：</span>"+time+"</div>" +
                    "<div class='content-row'><span class='content_tip'>地点：</span>"+cInfo.address+"</div>" +
                    "<div class='content-row'><span class='content_tip'>教师：</span>"+cInfo.tname+"</div>";
                div.append(content_class);

                var insertid=parseInt(cInfo.courseTime.split(",")[1]);
                document.getElementById("col-"+insertid).appendChild(div);
                //colset[insertid].append(div);
            },
            getcoursetable:function(){
                console.log(this.semester);
                console.log(this.start);
                this.$http.get("/getcoursetable/",{params : {semester:this.semester,start:this.start}}).then(function(value){
                    if(value.body.code==302){
                        alert(value.body.message);
                        window.location.href="/index";
                    }
                    if(value.body.code==505){
                        document.getElementById("table").style.display="none";
                        alert(value.body.message);
                        for(var i=1;i<8;i++){
                            document.getElementById("col-"+i).innerHTML="";
                        }
                    }
                    else{
                        for(var i=1;i<8;i++){
                            document.getElementById("col-"+i).innerHTML="";
                        }
                        this.all_course=value.body.data;
                        for(var i=0;i<this.all_course.length;i++){
                            this.parserHtml(this.all_course[i]);
                        }
                        document.getElementById("table").style.display="block";
                    }
                },function(reason){
                    alert("请求出错");
                });
            },
        }
    });
</script>
</html>